<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>智能处理重点实验室设备管理系统-用户界面</title>
		<link rel="stylesheet" type="text/css" href="../../../resource/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../../resource/css/niubility.css"/>

		<script type="text/javascript" src="../../../resource/layui/layui.js"></script>
		<!-- 公共样式引入： 每个页面都会引入功能样式，如果修改公共样式，只需要修改 link标签 -->
		<link rel="stylesheet" type="text/css" href="../../resource/css/user_css/publicStyle.css"/>
		<!-- 专属于index页面的css样式引入 -->
		<link rel="stylesheet" type="text/css" href="../../resource/css/user_css/indexStyle.css"/>
	</head>
	<body class="layui-layout layui-layout-admin">
<!-- ****************头部导航条************************************************* -->
		<div class="layui-header" id="div1">
			<!--菜单，左半部分，不用设置layui-layout-left-->
			<div class="layui-logo" id="div2">智能处理重点实验室设备管理系统</div>
			
			<!--这是菜单，右半部分-->
			<ul class="layui-nav  layui-layout-right"  id="haha">		   
			    <li class="layui-nav-item">
					<a><img src="/api/getAvatar" style="background-color: rgba(255,255,2555,1)" class="layui-nav-img">
						<span id="wo"></span></a>
			        <dl class="layui-nav-child">
						<dd><a id="employeeNumber" title="职工号"></a></dd>
						<dd><a id="researchRoom" title="所属研究室"></a></dd>
				        <dd><a onclick="reviseInfo()" style="cursor: pointer;">修改密码</a></dd>
				        <dd><a href="/api/logout-user">退出</a></dd>
			        </dl>
			    </li>
			</ul>
		</div>
<!--*****************左侧导航条************************-->
		<ul class="layui-nav layui-nav-tree layui-nav-side" id="navSide" lay-filter="ceshi">

			<!--入库-->
		  	<li class="layui-nav-item ">		   		   	      
			    <a href="javascript:;" class="siteDemoActive" data-id="ruku3" data-url="/page/user/purchase"  data-title="填写购买设备信息">填写购买设备信息</a>
		  	</li>

			<!--查看自己设备信息-->
			<li class="layui-nav-item">
			   <a href="javascript:;" class="siteDemoActive" data-id="equmentInfo" data-url="/page/user/information"  data-title="查看设备信息">查看设备信息</a>
			</li>
		
			<!--调入与调出-->
			<li class="layui-nav-item">
			    <a href="javascript:;">调入与调出</a>
			    <dl class="layui-nav-child">		    	  
			    	<dd>
			    	  <a href="javascript:;" class="siteDemoActive" data-id="diaoRu02" data-url="/page/user/transferIn" data-title="填写调入设备信息">填写调入设备信息
			    	  </a>
			    	</dd>
				    <dd>
				      <a href="javascript:;" class="siteDemoActive" data-id="diaoChu02" data-url="/page/user/transferOut" data-title="填写调出设备信息">填写调出设备信息
				      </a>
				    </dd>
			    </dl>
			</li>
			
			<!--设备维修申请-->			
			<li class="layui-nav-item">
				<a href="javascript:;">维修申请与维修确认</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="javascript:;" class="siteDemoActive" data-id="99" data-url="/page/user/repair" data-title="设备维修">设备维修维护申请
						</a>
					</dd>
					<dd>
						<a href="javascript:;" class="siteDemoActive" data-id="repairSure" data-url="/page/user/repairSure" data-title="维修确认">维修确认
						</a>
					</dd>
				</dl>
			</li>
			
			<!--设备意外毁坏申请-->
			<li class="layui-nav-item">
			  <a href="javascript:;" class="siteDemoActive" data-id="77" data-url="/page/user/damage" data-title="设备报损申请">设备报损报废申请</a>
			</li>
		</ul>
<!--**************中间主体区域*******************************中间主体区域***************-->
		<div class="layui-body layui-form" id="xixi">
			<!--***********弹出层： 修改密码********-->
			<div class="changePassHidden" id="changePass">
				<div class="btnOff" title="关闭" id="btnOff">×</div>
				<form action="/user/change-password" method="post" id="myForm1">
					<div class="form-group">
					    <label for="password">请输入新密码</label>
					    <input type="password" name="password" class="layui-input" id="password" placeholder="新密码">
				  	</div>
				  	<div class="form-group">
					    <label for="Confirm_password">请确认密码</label>
					    <input type="password" name="Confirm_password" class="layui-input" id="Confirm_password" placeholder="再一次确认新密码">
				  	</div>
					<button type="button" class="layui-btn" style="margin-top: 10px" onclick="mycheckPass()">提交</button>
				</form>
			</div>
			<!-- 动态生成标题 和 和页面 -->
			<div class="layui-tab"  lay-filter="demo"  id="top_tabs_box" lay-allowClose="true">
				<!--这一部分是生成的“ 标题 ”-->
				<ul class="layui-tab-title top_tab" id="top_tabs">
					<li class="layui-this" lay-id="" id="closeX">后台首页</li>						
				</ul>
				
				<!--这一部分是生成的“ 页面内容 ”-->
				<div class="layui-tab-content clildFrame" id="myContent">	
					<div class="layui-tab-item layui-show" id="lalala">
						<iframe scrolling="no" frameborder="0" src="/page/user/main.html"></iframe>
					</div>
				</div>
			</div>			
		</div>

		<script src="../../resource/js/jquery.min.js"></script>
		<!--引入全局的url：-->
		<script src="../../resource/js/static_url.js"></script>
		<!--Ajax获得用户信息 和 修改密码功能的js-->
		<script type="text/javascript" src="../../resource/js/index_admin_getsession.js"></script>
		<script type="text/javascript">
		// 函数调用：发起Ajax请求用户session信息
        getSession(user_session);
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
			//我们通常变量名 = 引入的模块名
		  	var element = layui.element;
			var $ = layui.jquery;			
			//触发事件
            var active = {
                //在这里给active绑定几项事件，后面可通过active调用这些事件
                tabAdd: function(url,id,name) {
                    //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    element.tabAdd('demo', {
                        title: name,
                        content: '<iframe data-frameid="'+id+'" scrolling="0" frameborder="0" src="'+url+'.html" ></iframe>',
                        id: id //规定好的id
                    })
                },
                tabChange: function(id) {
                    //切换到指定Tab项
                    element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                }, 
                tabDelete: function (id) {
					element.tabDelete("demo", id);//删除
                }
            };
			
			
			
			
			
			
		  	//通过相同的class绑定事件,使用jquery
			$('.siteDemoActive').on('click', function() {
                var dataid = $(this);

                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd( dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title") );
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange( dataid.attr("data-id") );
            });

		});
		</script>
	</body>
</html>
